<template>
    <div>
        <div class="bg-white grid-content">
        <el-form :inline="true" :model="bjcsjForm" class="demo-form-inline">
            <el-date-picker
            style="top: 15px"
            v-model="value1"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            unlink-panels
            >
        </el-date-picker>

        <!-- <el-form-item label="日期:">
        <el-date-picker v-model="searchDate" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="reload">查询</el-button>
          <el-button type="success" @click="exportExcel">下载</el-button>
        </el-form-item>
      </el-form>
        </div>
        <div class="bg-white grid-content">
      <div style="overflow: hidden">
        <div class="mytitle">
          <svg-icon icon-class="bjcsj" class="myIcon" />
          消防设备基础数据
        </div>
      </div>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
      >
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column align="center" prop="sbid" label="设备ID">
        </el-table-column>
        <el-table-column align="center" prop="jgmc" label="组织机构">
        </el-table-column>
        <el-table-column align="center" prop="zkmc" label="站库">
        </el-table-column>
        <el-table-column align="center" prop="bzmc" label="班组">
        </el-table-column>
        <el-table-column align="center" prop="sbbm" label="设备编码">
        </el-table-column>
        <el-table-column align="center" prop="sbmc" label="设备名称">
        </el-table-column>
        <el-table-column align="center" prop="ggxh" label="规格型号">
        </el-table-column>
        <el-table-column align="center" prop="sl" label="数量">
        </el-table-column>
        <el-table-column align="center" prop="pbwz" label="配备位置">
        </el-table-column>
        <el-table-column align="center" prop="kd" label="负责人">
        </el-table-column>
        <el-table-column align="center" prop="pbrq" label="配备日期">
        </el-table-column>
        <el-table-column align="center" prop="hyrq" label="换药日期">
        </el-table-column>
        <el-table-column align="center" prop="sccj" label="生产厂家">
        </el-table-column>
        <el-table-column align="center" prop="zhgxsj" label="最后更新时间">
        </el-table-column>
        <el-table-column align="center" prop="bz" label="备注">
        </el-table-column>

      </el-table>
      <!-- 分页器 -->
      <el-pagination
        align="right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[5, 10, 20, 30, 40, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
        </div>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  import { getToken } from "@/utils/auth";
  import zzjgApi from "@/api/jcsj/jcsy/zzjg";
  import zkjcsjApi from "@/api/jcsj/jcsy/zkjcsj";
  import cybzApi from "@/api/jcsj/jcsy/cybz";
  import xfsbjcsjApi from "@/api/jcsj/aqyx/xf/xfsbjcsj";
  import kgjApi from '@/api/jcsj/scgl/jsj/kgj'
  import sjbbApi from '@/api/jcsj/scgl/jsj/sjbb'
  
  export default {
    data() {
      return {
        leve:'',
        // show:false,//隐藏序列
        pageNo: 1, //当前页码
        pageSize: 10, //每页显示数量
        total: 0, //总数量
        // table数据
        tableData: [],
        //当前页码
        currentPage: 1,
        //表单填报的数据
        bjcsjForm: {
          bz: "", //备注
          bzid: "", //班组id
          ggxh: "", //规格型号
          hyrq: "", //换药日期
          jgid: "", //机构id
          pbrq: "", //配备日期
          pbwz: "", //配备位置
          sbbm: "", //设备编码
          sbid: "", //设备id
          sbmc: "", //设备名称
          sccj: "", //生产厂家
          sl: "", //数量
          updateTime: "", //
          zhgxsj: "", //最后更新时间
          zkid: "", //站库id
          kd: "", //负责人
          approveStatus:'',
          approveBz:'',
          xh:null
        },
        //时间快捷选择
        pickerOptions: {
          // disabledDate(time) {
          //   return time.getTime() > Date.now();
          // },
          shortcuts: [
            {
              text: "今天",
              onClick(picker) {
                picker.$emit("pick", new Date());
              },
            },
            {
              text: "昨天",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", date);
              },
            },
            {
              text: "一周前",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", date);
              },
            },
          ],
        },
        value1: "",
        //获取当前日期
        currentTime: "",
        //编辑框是否显示
        dialogFormVisible: false,
        //弹出框是否是查看
        ischeck: false,
        //控制查看时不可更改数据
        isInput: false,
        //弹出框标题
        myDialogTitle: true,
        isadd: true,
        //获取机构列表
        jgList: [],
        //获取站库列表
        zkList: [],
        //获取班组列表
        bzList: [],
  
        file: null,
          //加载动画
          uploadLoading: false,
          //上传的文件列表
          fileList: [],
          //控制弹出框显示与否
          uploadShowDialog: false,
          //上传地址
          uploadURL: '',
          //loading加载中
          downloadLoading: '',
          importDialog:false,
          fileList:[],
          urlFile:'',
          uploading:true,
          token:'',
      };
    },
    created() {
      this.search();
      this.reload();
    },
    mounted() {
    //   this.searchJg();
    //   this.searchZk();
    //   this.searchBz();
      this.filterTime();
    },
    methods: {
      /**
       * 查询列表
       */
      async search() {
        // this.pageNo = pageNo; //当前页码
        // this.pageSize = pageSize; //每页显示数量
        //发送查询请求
        let res = await xfsbjcsjApi.getList({
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          approveStatus:this.approveStatus,
          startDate:this.startDate,
          endDate:this.endDate
        });
        //判断是否成功
        if (res.success) {
          console.log(res.data);
          //赋值
          this.tableData = res.data.records;
          //总数量
          this.total = res.data.total;
        }
      },
  
  
  
      /*** 当每页数量发生变化时触发该事件 */
      handleSizeChange(size) {
        console.log(size);
        this.pageSize = size;
        //将每页显示的数量交给成员变量
        this.search(this.pageNo, size);
      },
      /*** 当页码发生变化时触发该事件 */
      handleCurrentChange(page) {
        console.log(page);
        this.pageNo = page;
        //调用查询方法
        this.search(page, this.pageSize);
      },
      // 序号计算
      indexMethod(index) {
        // index默认在0开始，这里+1
        return index + 1 + (this.pageNo - 1) * this.pageSize;
      },
      // 获取当前日期
      filterTime() {
        var date = new Date();
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        this.currentTime = y + "-" + m + "-" + d;
        // console.log(typeof(new Date(this.currentTime)));
      },
      //日期查询点击事件
    reload() {
      this.tableData = [];

      console.log(1010);
      console.log(this.value1[0]); //value1[0] 开始时间 value1[1] 结束时间
      this.startDate = this.value1[0];
      this.endDate = this.value1[1];
      this.search();
      //  console.log(this.value1[0]);
      //this.$refs.table.reload({ page: 1 });
    },
    },
    
  };
  </script>
  
  <style lang="scss" scoped>
  // 标题
  .mytitle {
    font-size: large;
    padding-left: 10px;
    margin-bottom: 16px;
    float: left;
  }
  
  //按钮组
  .myButtons {
    float: right;
  }
  
  //格子的样式
  .bg-white {
    background: #ffffff;
  }
  
  .grid-content {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
  }
  
  .calendar ::v-deep .el-button-group::before {
    display: none;
  }
  
  .calendar ::v-deep .el-button-group::after {
    display: none;
  }
  
  // 分割线样式
  .el-divider--horizontal {
    display: block;
    height: 2px;
    width: 100%;
    margin: 24px 0;
  }
  
  // 表单各项的样式
  .el-form-item {
    margin: 15px 10px 15px 10px;
  }
  
  //表单禁用字体样式
  .el-input.is-disabled ::v-deep .el-input__inner {
    color: #606266;
  }
  //对话框宽度
  // .customWidth{
  //         width:80%;
  //     }
  ::v-deep .saveAsDialog {
    width: 60% !important;
  }
  </style>
  